import React, { Component } from 'react';

class Life extends Component {
  constructor() {
    // 在这个生命周期中，可以 获取state，props，还可以调用函数
    console.log('1-初始化');
    super();
    this.state = {
      time: '1026'
    }
    this.fn1();
  }
  // 调用函数时要加上static
  // Derived:派生
  static getDerivedStateFromProps(props) {
    console.log(props);
    // 根据父传子的props修改state,最后要返回一个state对象，返回null表示不修改
    console.log('2-修改state');
    // return {
      //   msg: props.ssss // 修改的格式是这样的
      // }
      return null // 一般不修改
  }
  fn1() {
    console.log('666');
  }
  setTime() {
    this.setState({
      time: '1130'
    })
  }
  componentDidMount() {
    // 发请求放在这里
    console.log('4-渲染成功');
  }
  shouldComponentUpdate(newProps, newState)  {
    // 组件是否更新？要返回t f
    console.log('shouldComponentUpdate');
    console.log(this.props); // 老的数据
    console.log(this.state); // 老的数据
    console.log(newProps);
    console.log(newState);
    // 此时数据已经更新，但是页面时候更新取决于返回值
    // if(xxxx) {
      //   return true
      // }else {
        //   return false
        // }
    return true
  }
  // 更新时的快照  要和componentDidUpdate一起使用
  getSnapshotBeforeUpdate(oldP, oldS) {
    console.log(oldP);
    console.log(oldS);
    console.log('getSnapshotBeforeUpdate');
    return {msg: 'hi'}
  }
  // 组件已经更新
  componentDidUpdate(oldP, oldS, snapShot) {
    // newProps oldProps newState oldState 这四个中，缺少哪个函数就返回哪个
    console.log(oldP);
    console.log(oldS);
    console.log(snapShot);
    console.log('componentDidUpdate');
  }
  // 组件将要被销毁
  componentWillUnmount() {
    // 清除定时器，清除事件监听等...
    console.log(886);
  }
  render() {
    // 既在初始化阶段执行，又在更新阶段执行
    console.log('3-render');
    return (
      <div>
        <p>生命周期</p>
        <p>父传子的值：{this.props.msg}</p>
        <button onClick={()=>this.setTime()}>子：修改state-{this.state.time}</button>
      </div>
    );
  }
}

export default Life;
